<template>
	<view>
		<view class="search_Box">
			<image class="search_icon" src="../../static/dating/search_icon.png"></image>
			 <text class="partingLine"></text>
			 <text class="search">请输入关键词进行搜索</text>
		</view>
		<image class="publishtask" src="../../static/dating/publishtask_icon.png"></image>
		<view class="choose_Box">
			<view class="sellect_button" v-for="(item,index) in selectData" :key="index">
				<text class="butFont">{{item.butContent}}</text>
			</view>
		</view>
	    <view class="tabBox">
			<view :class="{outerLayer:index==stylenum}" @click="qiehuan(index,item)" v-for="(item,index) in tabData" :key="index">
				<view class="stylefont">{{item.tabContent}}</view>
			</view>
		</view>
		<view class="mainBox">
		<view class="specific" v-for="(item,index) in publicData" :key="index" @click="detilie()">
				<image class="img1" :src="item.img1"></image>
				<text class="number">编号: {{item.number}}</text>
				<image class="img2" :src="item.img2"></image>
				<text class="publicname diandiandian">{{item.publicname}}</text>
				<image class="img3" :src="item.img3"></image>
				<text class="num">数量:{{item.num}}</text>
				<image class="img4" :src="item.img4"></image>
				<text class="surplus">剩余:{{item.surplus}}</text>
				<text class="taskType">{{item.taskType}}</text>
				<image class="img5" :src="item.img5"></image>
				<text class="numpz">{{item.numpz}}凭证</text>
				<text class="money">￥{{item.money}}</text>
			</view>
		</view>
		<view class="fotter"></view>
		<div id="loading" v-if="loading">
			<span class="bounce bounce1"></span>
			<span class="bounce bounce2"></span>
			<span class="bounce bounce3"></span>
		</div>
		<div v-if="!hasMore" class="No_more">没有更多数据了</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:false,
				hasMore: true,
				stylenum:0,
				selectData:[{
					butContent:'全部'
				},{
					butContent:'注册'
				},{
					butContent:'投票'
				},{
					butContent:'关注'
				},{
					butContent:'浏览'
				},{
					butContent:'加粉'
				},{
					butContent:'转发'
				},{
					butContent:'发帖'
				},{
					butContent:'评论'
				},{
					butContent:'高价'
				},{
					butContent:'特单'
				},{
					butContent:'长单'
				},{
					butContent:'电商'
				},{
					butContent:'其他'
				},{
					butContent:'闲玩'
				}],
				tabData:[{
					tabContent:'默认'
				},{
					tabContent:'新人专属'
				},{
					tabContent:'最新发布'
				},{
					tabContent:'凭证最多'
				},{
					tabContent:'人气做高'
				}],
				publicData:[{
					img1:'../../static/dating/number.png',
					number:'202003200001',
					img2:'../../static/dating/public.png',
					publicname:'任务名称任务名称',
					img3:'../../static/dating/shulaing.png',
					num:'1080',
					img4:'../../static/dating/text.png',
					surplus:'809',
					taskType:'任务类型',
					img5:'../../static/dating/pingzheng.png',
					numpz:'100',
					money:'6.80'
				},{
					img1:'../../static/dating/number.png',
					number:'202003200001',
					img2:'../../static/dating/public.png',
					publicname:'任务名称',
					img3:'../../static/dating/shulaing.png',
					num:'1080',
					img4:'../../static/dating/text.png',
					surplus:'809',
					taskType:'任务类型',
					img5:'../../static/dating/pingzheng.png',
					numpz:'100',
					money:'6.80'
				},{
					img1:'../../static/dating/number.png',
					number:'202003200001',
					img2:'../../static/dating/public.png',
					publicname:'任务名称任务名称任务名称任务名称任务名称任务名称',
					img3:'../../static/dating/shulaing.png',
					num:'1080',
					img4:'../../static/dating/text.png',
					surplus:'809',
					taskType:'任务类型',
					img5:'../../static/dating/pingzheng.png',
					numpz:'100',
					money:'6.80'
				},{
					img1:'../../static/dating/number.png',
					number:'202003200001',
					img2:'../../static/dating/public.png',
					publicname:'任务名称',
					img3:'../../static/dating/shulaing.png',
					num:'1080',
					img4:'../../static/dating/text.png',
					surplus:'809',
					taskType:'任务类型',
					img5:'../../static/dating/pingzheng.png',
					numpz:'100',
					money:'6.80'
				},{
					img1:'../../static/dating/number.png',
					number:'202003200001',
					img2:'../../static/dating/public.png',
					publicname:'任务名称',
					img3:'../../static/dating/shulaing.png',
					num:'1080',
					img4:'../../static/dating/text.png',
					surplus:'809',
					taskType:'任务类型',
					img5:'../../static/dating/pingzheng.png',
					numpz:'100',
					money:'6.80'
				}],
			}
		},
		methods: {
			detilie(){
				uni.navigateTo({
					url:"../index/task_details/task_details"
				})
			},
				qiehuan(index,item){
					this.stylenum=index
				}
		},
		// 下拉刷新
		onReachBottom: function() {
			var self = this;
			self.loading = true;
			self.hasMore=true
			uni.showToast({
				title: "下拉加载"
			})
			setTimeout(function () {
			    self.loading = false;
				self.hasMore=false
			}, 2000);
		},
		// 上拉加载
		onPullDownRefresh:function(){
			        setTimeout(function () {
			            uni.stopPullDownRefresh();  //停止下拉刷新动画
			        }, 1000);
		  uni.showToast({
		  	title: "刷新成功"
		  })
		 },
	}
</script>

<style>
  .search_Box{
	  width: 606rpx;
	  height: 60rpx;
	  position: relative;
	  margin-top: var(--status-bar-height);
	  left: 35rpx;
	  box-sizing: border-box;
  }
  .search_icon{
	  width: 26rpx;
	  height: 26rpx;
	  position: absolute;
	  top: 17rpx;
	  left: 20rpx;
  }
  .partingLine{
	  display: block;
	  width: 2rpx;
	  height: 20rpx;
	  border-right: 2rpx solid #666666;
	  position: absolute;
	  top: 20rpx;
	  left: 60rpx;
  }
  .search{
      font-size:26rpx;
      font-family:PingFangSCRegular;
      font-weight:400;
      color:rgba(156,156,156,1);
	  position: absolute;
	  top: 12rpx;
	  left: 78rpx;
  }
  .publishtask{
	  width: 34rpx;
	  height: 37rpx;
	  position: absolute;
	  top: 10rpx;
	  right: 35rpx;
	  margin-top: var(--status-bar-height);
  }
  .choose_Box{
	  width: 680rpx;
	  height: 180rpx;
	  position: relative;
	  top:70rpx;
	  left: 35rpx;
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-between;
	  align-content: space-between;
  }
  .sellect_button{
	  width:120rpx;
	  height:46rpx;
	  border:2rpx solid rgba(212,32,238,1);
	  border-radius:23rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  }
	  .sellect_button text{
		  font-size:26rpx;
		  font-family:PingFang SC;
		  font-weight:400;
		  color:rgba(51,51,51,1);
	  }
	  .sellect_button:first-child{
		  width:110rpx;
		  height:46rpx;
		  background:linear-gradient(45deg,rgba(212,32,238,1) 0%,rgba(115,34,216,1) 100%);
		  border-radius:23rpx;
	  }
	  .sellect_button:first-child text{
		  font-size:26rpx;
		  font-family:PingFang SC;
		  font-weight:400;
		  color:rgba(255,255,255,1);
	  }
     .tabBox{
		 width: 680rpx;
		 height: 60rpx;
		 position: relative;
		 top: 120rpx;
		 left: 37rpx;
		 display: flex;
		 justify-content: space-between;
		 align-items: center;
	 }
		 .outerLayer{
			 border-bottom: 6rpx solid #7322D8;
			 color: #7322D8;
		 }
		 .stylefont{
			 font-size:28rpx;
			 padding: 10rpx 15rpx;
			 }
		 .mainBox{
			 width: 690rpx;
			 position: relative;
			 top: 120rpx;
			 left: 35rpx;
			 display: flex;
			 flex-wrap: wrap;
			 justify-content: space-between;
		 }
		 .specific{
			width:325rpx;
			height:425rpx;
			background:rgba(255,255,255,1);
			box-shadow:0rpx 0rpx 15rpx 1rpx rgba(115,34,216,0.1);
			border-radius:20rpx;
			margin-top: 30rpx;
			position: relative;
		 }
		 .img1{
			 width: 22rpx;
			 height: 16rpx;
			 position: absolute;
			 left: 20rpx;
			 top: 20rpx;
		 }
		 .number{
			 font-size:24rpx;
			 font-family:PingFang SC;
			 font-weight:400;
			 color:#999999;
			 position: absolute;
			 left: 51rpx;
			 top: 12rpx;
		 }
		 .img2{
			 width: 285rpx;
			 height: 191rpx;
			 position: absolute;
			 top: 54rpx;
			 left: 20rpx;
		 }
		 .publicname{
             font-size:28rpx;
             font-family:PingFang SC;
             font-weight:400;
             color:rgba(51,51,51,1);
			 position: absolute;
			 top: 255rpx;
			 left: 20rpx;
			 width: 100%;
		 }
		 .img3{
			 width: 22rpx;
			 height: 22rpx;
			 position: absolute;
			 top: 305rpx;
			 left: 20rpx;
		 }
		 .num{
			 font-size:24rpx;
			 font-family:PingFang SC;
			 font-weight:400;
			 color:#999999;
			 position: absolute;
			 top: 298rpx;
			 left: 46rpx;
		 }
		 .img4{
			 width: 22rpx;
			 height: 22rpx;
			 position: absolute;
			 top: 306rpx;
			 left: 180rpx;
		 }
		 .surplus{
			 font-size:24rpx;
			 font-family:PingFang SC;
			 font-weight:400;
			 color:#999999;
			 position: absolute;
			 top: 298rpx;
			 left: 205rpx;
		 }
		 .taskType{
			 display: block;
			 background:rgba(115,34,216,1);
			 opacity:0.5;
			 border-radius:6rpx;
			 font-size:20rpx;
			 font-family:PingFang SC;
			 font-weight:400;
			 color:rgba(240,240,240,1);
			 display: flex;
			 justify-content: center;
			 align-items: center;
			 position: absolute;
			 top: 341rpx;
			 left: 21rpx;
			 padding: 6rpx;
		 }
		 .img5{
			 width:22rpx;
			 height:24rpx;
			 position: absolute;
			 top: 390rpx;
			 left: 20rpx;
		 }
		 .numpz{
			 font-size:24rpx;
			 font-family:PingFang SC;
			 font-weight:400;
			 color:rgba(51,51,51,1);
			 position: absolute;
			 top: 387rpx;
			 left: 47rpx;
		 }
		 .money{
			 font-size:30rpx;
			 font-family:PingFang SC;
			 font-weight:400;
			 color:rgba(255,59,48,1);
			 position: absolute;
			 top: 375rpx;
			 right:19rpx ;
		 }
		 .fotter{
			 width: 750rpx;
			 height: 200rpx;
		 }
</style>
